<template>
  <div class="bread">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path ? { path: item.path } : null">
        {{ item.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { ref } from 'vue';

const breadcrumbItems = ref([
  { label: '首页', path: '/' },
  { label: '历史' },
  { label: '架空历史' },
  { label: '朝天子' }
]);

// 根据需要动态更新 breadcrumbItems 数组
function updateBreadcrumbs(newItems) {
  breadcrumbItems.value = newItems;
}

// 示例：更新面包屑导航
updateBreadcrumbs([
  { label: '首页', path: '/' },
  { label: '新历史' },
  { label: '新架空历史' },
  { label: '新朝天子' }
]);
</script>
<style scoped>
.bread {
  max-width: 100%; /* 设置最大宽度 */
  overflow-x: hidden; /* 隐藏水平溢出内容 */
  margin: 10px 5px 0 40px;
}
</style>